/**
 * 功能描述: 基础checkbox样式
 * @author 赵常畅
 * @date 2022/9/22 14:05
 * @version 1.0
 */

@import "../../style/index";
@import "checkboxConstant";

// 动画
@mixin checkboxEffect {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
// 兼容火狐的动画
@-webkit-keyframes #{$namespace}CheckboxEffect {
  @include checkboxEffect;
}
// 基本语法的动画
@keyframes #{$namespace}CheckboxEffect {
  @include checkboxEffect;
}

// 基础多选框
@mixin checkbox--layout {
  // 布局
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
  top: 0.2em;
  line-height: 1;
  // 并列的兄弟span
  & + span {
    padding-right: 8px;
    padding-left: 8px;
  }
}
@include b(checkbox) {
  // 样式
  color: $--checkbox-font-color;
  font-size: $--checkbox-font-size;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: 'tnum';
  white-space: nowrap;
  outline: none;
  cursor: pointer;
  // 引入布局
  @include checkbox--layout;
}

// 鼠标悬浮、获得焦点 内容容器
.#{$namespace}-checkbox-wrapper:hover .#{$namespace}-checkbox-inner,
.#{$namespace}-checkbox:hover .#{$namespace}-checkbox-inner,
.#{$namespace}-checkbox-input:focus + .#{$namespace}-checkbox-inner {
  border-color: $--checkbox-hover-border-color;
}

// 选中复选框
@mixin checkbox-wrapper-checked--layout {
  // 布局
  // 伪类 内部后面
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  // 复选框 内容容器 伪类 内部后面
  @include b(checkbox-inner) {
    &::after {
      position: absolute;
      display: table;
    }
  }
}
@include b(checkbox-wrapper-checked) {
  // 样式
  // 伪类 内部后面
  &::after {
    border: $--checkbox-checked-border;
    border-radius: $--checkbox-checked-border-radius;
    visibility: hidden;
    -webkit-animation: $--checkbox-checked-animation;
    animation: $--checkbox-checked-animation;
    -webkit-animation-fill-mode: $--checkbox-checked-animation-fill-mode;
    animation-fill-mode: $--checkbox-checked-animation-fill-mode;
    content: '';
  }
  // 复选框内容
  @include b(checkbox-inner) {
    background-color: $--checkbox-checked-inner-background-color;
    border-color: $--checkbox-checked-inner-border-color;
    // 伪类 内部后面
    &::after {
      border: $--checkbox-checked-inner-border;
      border-top: 0;
      border-left: 0;
      transform: $--checkbox-checked-inner-transform;
      opacity: 1;
      transition: $--checkbox-checked-inner-transition;
      content: ' ';
    }
  }
  // 引入样式
  @include checkbox-wrapper-checked--layout;
}

// 复选框 鼠标悬浮 伪类 内部后面
.#{$namespace}-checkbox:hover::after,
.#{$namespace}-checkbox-wrapper:hover .#{$namespace}-checkbox::after {
  visibility: visible;
}

// 复选框内部对勾样式
@mixin checkbox-inner--layout {
  // 布局
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 16px;
  height: 16px;
  // 伪类 内部后面
  &::after {
    position: absolute;
    top: 50%;
    left: 21.5%;
    display: table;
    width: 5.71428571px;
    height: 9.14285714px;
  }
}
@include b(checkbox-inner) {
  // 样式
  direction: ltr;
  background-color: $--checkbox-inner-background-color;
  border: $--checkbox-inner-border;
  border-radius: $--checkbox-inner-border-radius;
  border-collapse: separate;
  transition: $--checkbox-inner-transition;
  // 伪类 内部后面
  &::after {
    border: $--checkbox-inner-after-border;
    border-top: 0;
    border-left: 0;
    transform: $--checkbox-inner-after-transform;
    opacity: 0;
    transition: $--checkbox-inner-after-transition;
    content: ' ';
  }
  // 引入布局
  @include checkbox-inner--layout;
}

// 隐藏原生复选框
@mixin checkbox-input--layout {
  // 布局
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@include b(checkbox-input) {
  // 样式
  z-index: 1;
  cursor: pointer;
  opacity: 0;
  // 引入布局
  @include checkbox-input--layout;
}

// 清空动画
@mixin clear-animation {
  -webkit-animation-name: none;
  animation-name: none;
}
// 禁用复选框
@include b(checkbox-wrapper-disabled) {
  cursor: not-allowed;
  // 被选中的
  &.#{$namespace}-checkbox-wrapper-checked {
    // 复选框 内容
    @include b(checkbox-inner) {
      // 伪类 内部后面
      &::after {
        border-color: $--checkbox-disabled-checked-border-color;
        // 引入清空动画样式
        @include clear-animation;
      }
    }
  }
  // 原生input
  @include b(checkbox-input) {
    cursor: not-allowed;
    pointer-events: none;
  }
  // 复选框对勾
  @include b(checkbox-inner) {
    background-color: $--checkbox-disabled-inner-background-color;
    border-color: $--checkbox-disabled-inner-border-color !important;
    // 伪类 内部前面 对勾
    &::after {
      border-color: $--checkbox-disabled-inner-after-border-color;
      border-collapse: separate;
      @include clear-animation;
    }
  }
  // span样式
  span {
    color: $--checkbox-disabled-font-color;
    cursor: not-allowed;
  }
}

// 多选框最外层容器
@mixin checkbox-wrapper--layout {
  // 布局
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: baseline;
  line-height: unset;
  // 伪类 内部前面
  &::after {
    display: inline-block;
    width: 0;
  }
  // 并列多选框
  & + .#{$namespace}-checkbox-wrapper {
    margin-left: 8px;
  }
}
@include b(checkbox-wrapper) {
  // 样式
  color: $--checkbox-font-color;
  font-size: $--checkbox-font-size;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: 'tnum';
  cursor: pointer;
  // 伪类 内部前面
  &::after {
    overflow: hidden;
    content: '\a0';
  }
  // 禁用
  &.#{$namespace}-checkbox-wrapper-disabled {
    cursor: not-allowed;
  }
  // 引入布局
  @include checkbox-wrapper--layout;
}
